<template>
	<view class="back-bg" v-if="!userTeam.length">
		<view class="outermaster">
			<view class="top-title">
				<view class="nearby-institutions">附近机构</view>
				<view class="nearby-item">
					<view class="look-more" @click="toOrganization">查看更多</view>
					<view class="look-all">
						<image src="/static/icons/u1334.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 横向滚动的机构 -->
			<scroll-view :scroll-x="true" class="scorll-container" :enable-fles="true">
				<!-- 横向滚动的 -->
				<view class="srcoll-x-item" v-for="item in organizationsData.rows" :key="item._id"
					@click="toOrganizationPage(item._id)">
					<view class="scorll-item">
						<!-- 左边的图片 -->
						<view class="scorll-image">
							<image src="/static/icons/u5251.png" mode=""></image>
						</view>
						<!-- 右边的文字 -->
						<view class="scorll-text">
							<view class="team-name">{{item.name}}</view>
							<view class="team-address">距您3.6km</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="outermaster">
			<view class="top-title">
				<view class="nearby-institutions">附近团队</view>
				<view class="nearby-item">
					<view class="look-more" @click="toNearTeam">查看更多</view>
					<view class="look-all">
						<image src="/static/icons/u1334.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 横向滚动的团队 -->
			<scroll-view :scroll-x="true" class="scorll-container" :enable-fles="true">
				<!-- 横向滚动的 -->
				<view class="srcoll-x-item" v-for="item in teamData.rows" :key="item._id" @click="toSignPath(item._id)">
					<view class="scorll-item">
						<!-- 左边的图片 -->
						<view class="scorll-image">
							<image :src="item.avatar" mode=""></image>
						</view>
						<!-- 右边的文字 -->
						<view class="scorll-text">
							<view class="team-name">{{item.name}}</view>
							<view class="team-km">{{item.organizationId?.name}}</view>
							<view class="team-address">距您3.6km</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
	import {
		getTeamDataApi
	} from '../../api/team';
	import {
		getOrganizationsApi
	} from '../../api/organizations';
	import {
		useUserStore
	} from '../../store/user';
	import {
		getByResidentIdApi
	} from '../../api/home';
	const userStore = useUserStore()
	const userTeam = ref([])

	onMounted(() => {
		getTeam()
		getOranizations()
		getData()
	})
	const teamData = reactive({
		rows: [],
		total: 0
	})

	function toOrganization() {
		uni.navigateTo({
			url: '/SignPackage/pages/organization/organization'
		})
	}

	// 机构的数据
	const organizationsData = reactive({
		rows: [],
		total: 0
	})
	// 获取团队的数据
	const getTeam = () => {
		getTeamDataApi().then(res => {
			if (res.code == 200) {
				// console.log(res.data);
				teamData.rows = res.data.rows
				teamData.total = res.data.total
			}
		})
	}
	// 获取机构的数据
	const getOranizations = () => {
		getOrganizationsApi().then(res => {
			if (res.code == 200) {
				// console.log(res.data);
				organizationsData.rows = res.data.rows
				organizationsData.total = res.data.total
			}
		})
	}
	// 
	const getData = () => {
		getByResidentIdApi({
				residentId: userStore.userInfo?._id
			})
			.then(res => {
				if (res.code == 200) {
					// console.log('太好啦', res.data);
					userTeam.value = res.data
				}
			})
	}

	// 跳转机构主页
	function toOrganizationPage(data) {
		uni.navigateTo({
			url: '/SignPackage/pages/sign/sign?_id=' + data
		})
	}

	function toSignPath(_id) {
		uni.navigateTo({
			url: '/SignPackage/pages/team-doctor/team-doctor?_id=' + _id
		})
	}

	function toNearTeam() {
		uni.navigateTo({
			url: '/HealthHeadlinesPackage/pages/nearTeam/nearTeam'
		})
	}
</script>

<style scoped lang="scss">
	.back-bg {
		width: 750rpx;
		height: 880rpx;
		background-color: #f5f5f5;
		overflow: hidden;
	}

	.outermaster {
		height: 418rpx;
		background-color: #ffffff;
		padding: 0 32rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		// border: 1px solid;
	}

	.top-title {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
	}

	.nearby-institutions {
		font-size: 40rpx;
		color: #333333;
	}

	.nearby-item {
		display: flex;

		.look-more {
			font-size: 24rpx;
			color: #999999;
			text-align: center;
			margin-right: 10rpx;
		}

		.look-all {
			image {
				width: 14rpx;
				height: 20rpx;
				margin-bottom: 7rpx;
			}
		}
	}

	.scorll-container {
		width: calc(750rpx - 32rpx - 32rpx);
		height: 350rpx;
		white-space: nowrap;

		.srcoll-x-item {
			display: inline-block;
		}
	}

	.scorll-item {
		width: 492rpx;
		height: 240rpx;
		border: 1rpx solid #eaf3fe;
		display: flex;
		border-radius: 20rpx;
		margin: 0px 20rpx;

		.scorll-image {
			padding: 30rpx 30rpx;

			image {
				width: 160rpx;
				height: 160rpx;
			}

		}
	}

	.team-name {
		font-size: 32rpx;
		color: #333333;
		white-space: pre-line;
		/* 保留换行符并自动换行 */
		margin-top: 20rpx;
		line-height: 1.8;
	}

	.team-address {
		font-size: 24rpx;
		color: #999999;
		// margin-top: 10rpx;
		// margin-bottom: 20rpx;
		font-weight: 400;
	}

	.team-km {
		font-size: 24rpx;
		color: #999999;
		margin-top: 10rpx;
		// margin-bottom: 20rpx;
		font-weight: 400;
		white-space: pre-line;
	}
</style>